<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div id="app">
    <a href="/home">首页</a>
    <a href="/about">关于</a>

    <div class="router_view"></div>
  </div>

  <script>
    const routerViewEle = document.getElementsByClassName('router_view')[0];

    const aEles = document.getElementsByTagName("a");
    for (const ela of aEles) {
      ela.addEventListener("click", e => {
        e.preventDefault();

        const href = ela.getAttribute("href");
        history.pushState({}, "", href);
        urlChange()
      })
    }

    //执行浏览器返回操作时，依然调用urlChange
    window.addEventListener("popstate", urlChange);
    
    function urlChange() {
      switch (location.pathname) {
        case "/home":
          routerViewEle.innerHTML = "首页";
          break;
        case "/about":
          routerViewEle.innerHTML = "关于";
          break;
        default:
          routerViewEle.innerHTML = "";
      }
    }
  </script>
</body>
</html>